<template>


<div class="sccc">
    <div class="bbbb"><mt-button type="primary" size="large" @click="back">返回首页</mt-button></div>
    
    <div class="menu">
        <ul class="menu-list">
            <!-- <router-link tag="li" to='item.path'><span>{{item.title}}</span></router-link> -->

           <router-link
                tag="li"
                :to='item.path'
                v-for="item of list" 
                :key="item.id"
                ><span>{{item.title}}</span>
            </router-link>
           
       
      </ul>
        <router-view></router-view>
    </div>
</div>    
</template>

<script>
    
import { Button } from 'mint-ui';
export default {

    data(){
        return {
            list:[{
                 id:1,
            path:'/menu/badroom',
            title:'卧室床品'
            },{
                 id:2,
            path:'/menu/toweling',
            title:'冠军毛巾'
            },{
                 id:3,
            path:'/menu/woman',
            title:'女装'
            },{
                 id:4,
            path:'/menu/man',
            title:'男装'
            },{
                 id:5,
          path:'/menu/underwear',
            title:'贴身衣物'
            },{
                 id:6,
            path:'/menu/slipper',
            title:'袜子拖鞋'
            },{
                 id:7,
            path:'/menu/commodity',
            title:'日用品'
            },{
                 id:8,
              path:'/menu/washing',
            title:'洗涤用品'
            },{
                 id:9,
            path:'/menu/bag',
            title:'包袋'
            },{
                 id:10,
           path:'/menu/child',
            title:'婴童用瓶'
            }]
        }
    },

created(){

    // this.$router.push('menu/badroom')
},
components:{
        'mt-button':Button
 },
    methods:{
    back(){
        console.log(this)
        this.$router.push({
            path:'/home'
        })
    }
}
}
</script>

<style lang="scss" >

.sccc{
    height: 100%;
}
.menu{
  
   overflow: hidden;
    display: flex;
      height: 100%;
     &-list{
        display: flex;
        flex-direction: column;
        background: #e9e9e9;
        width:120px;
       
        height:100%;
        li{
         font-size: 1.2em;
           line-height:20px;
           
            width: 102px;
          
           text-align: center;
           height:4%;
    padding: 15px 0px;
            span{
                color: rgb(0, 0, 0);
                font-size: 15px;
            }
        span:hover{
            color:red;   
        }
        }
       
      
    }
}

.menu-over{
    height: 100%;
  
    width: 100%;
}
</style>



